
<template>
    <el-form ref="ruleFormRef" :model="presentHistoryRuleForm" :rules="rules" label-width="200px" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-container class="patient-form-container">
            <el-form-item label="疼痛出现于" prop="painWhen" label-width="120px">
                <!-- <el-select v-model="painWhen" multiple placeholder="Select" style="width: 280px">
                    <el-option v-for="item in painWhenList" :key="item.item_code" :label="item.item_name"
                        :value="item.item_code" />
                </el-select> -->
                <el-checkbox-group v-model="painWhen">
                    <el-checkbox :label="item.item_name" v-for="item in painWhenList" :value="item.item_code" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="疼痛部位" prop="painOption" label-width="120px">
                <el-checkbox-group v-model="painOption">
                    <el-checkbox :label="item.item_name" v-for="item in painOptionList" :value="item.item_code" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="疼痛程度" prop="painEffectOption" label-width="120px">
                <el-checkbox-group v-model="painEffectOption">
                    <el-checkbox :label="item.item_name" v-for="item in painEffectList" :value="item.item_code" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="疼痛发生频率" prop="painRateOption" label-width="120px">
                <el-checkbox-group v-model="painRateOption">
                    <el-checkbox :label="item.item_name" v-for="item in painRateList" :value="item.item_code" />
                </el-checkbox-group>
            </el-form-item>

        </el-container>
        <div class="knee-joint-activity">膝关节最大活动量评估：</div>
        <el-container class="patient-form-container">
            <el-form-item label="膝关节不疼痛的情况下" prop="kneeNoPainSceneOption">
                <el-checkbox-group v-model="kneeNoPainSceneOption">
                    <template v-for="(item, index) in kneeNoPainSceneList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="膝关节不肿胀的情况下" prop="kneeNoSweSceneOption">
                <el-checkbox-group v-model="kneeNoSweSceneOption">
                    <template v-for="(item, index) in kneeNoPainSceneList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="膝关节不发生酸软的情况下" prop="kneeNoAchSceneOption">
                <el-checkbox-group v-model="kneeNoAchSceneOption">
                    <template v-for="(item, index) in kneeNoPainSceneList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="有规律地参加的活动是" prop="regularlyOption">
                <el-checkbox-group v-model="regularlyOption">
                    <template v-for="(item, index) in kneeNoPainSceneList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
        </el-container>
        <div class="knee-joint-activity">目前可从事的活动:</div>
        <el-container class="patient-form-container">
            <el-form-item label="剧烈活动，如跑步、举重物" prop="parcitActiveOption" label-width="280px" class="patient-form-item">
                <el-radio-group v-model="parcitActiveOption">
                    <template v-for="(item, index) in parcitActiveList" :key="index">
                        <el-radio :label="item.item_code">{{ item.item_name }}</el-radio>
                    </template>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="一般活动，如移动桌子、使用吸尘器" prop="generalActiveOption" label-width="280px" class="patient-form-item">
                <el-radio-group v-model="generalActiveOption">
                    <template v-for="(item, index) in parcitActiveList" :key="index">
                        <el-radio :label="item.item_code">{{ item.item_name }}</el-radio>
                    </template>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="抬或搬运日用品" prop="movingActiveOption" label-width="280px" class="patient-form-item">
                <el-radio-group v-model="movingActiveOption">
                    <template v-for="(item, index) in parcitActiveList" :key="index">
                        <el-radio :label="item.item_code">{{ item.item_name }}</el-radio>
                    </template>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="爬多层楼梯" prop="climbingMultipleStairsOption" label-width="280px" class="patient-form-item">
                <el-radio-group v-model="climbingMultipleStairsOption">
                    <template v-for="(item, index) in parcitActiveList" :key="index">
                        <el-radio :label="item.item_code">{{ item.item_name }}</el-radio>
                    </template>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="爬一层楼梯" prop="climbingOneStairsOption" label-width="280px" class="patient-form-item">
                <el-radio-group v-model="climbingOneStairsOption">
                    <template v-for="(item, index) in parcitActiveList" :key="index">
                        <el-radio :label="item.item_code">{{ item.item_name }}</el-radio>
                    </template>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="弯腰、曲背或跪下" prop="bendingOption" label-width="280px" class="patient-form-item">
                <el-radio-group v-model="bendingOption">
                    <template v-for="(item, index) in parcitActiveList" :key="index">
                        <el-radio :label="item.item_code">{{ item.item_name }}</el-radio>
                    </template>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="洗澡或自己穿衣服" prop="batheOption" label-width="280px" class="patient-form-item">
                <el-radio-group v-model="batheOption">
                    <template v-for="(item, index) in parcitActiveList" :key="index">
                        <el-radio :label="item.item_code">{{ item.item_name }}</el-radio>
                    </template>
                </el-radio-group>
            </el-form-item>
        </el-container>
        <el-container class="patient-form-container">
            <el-form-item label="跛行程度" prop="limpDegreeOption" class="patient-form-item" label-width="120px">
                <el-checkbox-group v-model="limpDegreeOption">
                    <template v-for="(item, index) in limpDegreeList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="跛行规律" prop="limpLawOption" class="patient-form-item" label-width="120px">
                <el-checkbox-group v-model="limpLawOption">
                    <template v-for="(item, index) in limpLawList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="支具支撑助行" prop="braceSupportOption" class="patient-form-item" label-width="120px">
                <el-checkbox-group v-model="braceSupportOption">
                    <template v-for="(item, index) in braceSupportList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="连续行走距离" prop="continousWalkOption" class="patient-form-item" label-width="120px">
                <el-checkbox-group v-model="continousWalkOption">
                    <template v-for="(item, index) in continousWalkList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="健康或情绪对生活的影响" prop="effectLifeOption" class="patient-form-item" label-width="220px">
                <el-checkbox-group v-model="effectLifeOption">
                    <template v-for="(item, index) in effectLifeList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="药物镇痛" prop="medLaborPainOption" class="patient-form-item" label-width="220px">
                <el-checkbox-group v-model="medLaborPainOption">
                    <template v-for="(item, index) in medLaborPainList" :key="index">
                        <el-checkbox :label="item.item_name" :value="item.item_code">{{ item.item_name }}</el-checkbox>
                    </template>
                </el-checkbox-group>
            </el-form-item>
        </el-container>
    </el-form>
</template>

<script lang="ts" setup >
import { reactive, ref, onMounted, watchEffect } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getLookUpByCode } from "../../axios/http"

interface RuleForm {
    name: string;
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const presentHistoryRuleForm = reactive<RuleForm>({
    name: ''
})

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },

    ],
})
let painWhenList: any = reactive([])
let painOptionList: any = reactive([])
let painEffectList: any = reactive([])
let painRateList: any = reactive([])
let kneeNoPainSceneList: any = reactive([])
let parcitActiveList: any = reactive([])
let limpDegreeList: any = reactive([])
let limpLawList: any = reactive([])
let braceSupportList: any = reactive([])
let continousWalkList: any = reactive([])
let effectLifeList: any = reactive([])
let medLaborPainList: any = reactive([])

onMounted(async () => {
    await getFormInfo();
});

const painWhen = ref([])
const painOption = ref([])
const painEffectOption = ref([])
const painRateOption = ref([''])
const kneeNoPainSceneOption = ref([])
const kneeNoSweSceneOption = ref([])
const kneeNoAchSceneOption = ref([])
const regularlyOption = ref([])
const parcitActiveOption = ref('')
const generalActiveOption = ref('')
const movingActiveOption = ref('')
const climbingMultipleStairsOption = ref('')
const climbingOneStairsOption = ref('')
const bendingOption = ref('')
const batheOption = ref('')
const limpDegreeOption = ref([])
const limpLawOption = ref([])
const braceSupportOption =  ref([])
const continousWalkOption =  ref([])
const effectLifeOption =  ref([])
const medLaborPainOption =  ref([])

const getFormInfo = async () => {
    let painLableList = ['PAIN_WHEN', 'PAIN_OPTION', 'PAIN_EFFECT', 'PAIN_RATE',
        'MAX_ACTIVITY_EVALUATION', 'ACTIVITY_LIMITATION', 'LIMP_DEGREE', 'LIMP_LAW',
        'BRACE_SUPPORT', 'CONTINUOUS_WALK_DISTANCE', 'EFFECT_LIFE', 'MEDICATED_LABOR_PAIN']
    painLableList.forEach(async (item) => {
        let res = await getLookUpByCode(item);
        switch (item) {
            case 'PAIN_WHEN':
                painWhenList.push(...res);
                break;
            case 'PAIN_OPTION':
                painOptionList.push(...res);
                break;
            case 'PAIN_EFFECT':
                painEffectList.push(...res);
                break;
            case 'PAIN_RATE':
                painRateList.push(...res);
                break;
            case 'MAX_ACTIVITY_EVALUATION':
                kneeNoPainSceneList.push(...res);
                break;
            case 'ACTIVITY_LIMITATION':
                parcitActiveList.push(...res);
                break;
            case 'LIMP_DEGREE':
                limpDegreeList.push(...res);
                break;
            case 'LIMP_LAW':
                limpLawList.push(...res);
                break;
            case 'BRACE_SUPPORT':
                braceSupportList.push(...res);
                break;
            case 'CONTINUOUS_WALK_DISTANCE':
                continousWalkList.push(...res);
                break;
            case 'EFFECT_LIFE':
                effectLifeList.push(...res);
                break;
            case 'MEDICATED_LABOR_PAIN':
                medLaborPainList.push(...res);
                break;
            default:
                break;
        }
    })

}

</script>

<style scoped lang='scss'>
.patient-form-container {
    width: 100%;
    display: flex;
    flex-direction: row;

    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;

    .patient-form-item {
        width: 100%;
    }

    .patient-form-container-item {
        width: 25%;
        display: flex;
        align-items: center;

        .patient-form-container-item-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            ::deep .el-input {
                width: 83% !important;
            }

            span {
                display: inline-block;
                flex: 1;
                text-align: right;
            }
        }
    }

    .patient-form-container-item-textarea {
        width: 50%;
    }
}

.knee-joint-activity {
    padding: 0px 15px 10px 15px;
    box-sizing: border-box;
}
</style>